<template>
    <div class="bg-white p-20px m-20px rounded-12px">
        <div class="mb-8px">
            <div>
                <filterComponent v-model:filter-data="filterData" @doSearch="getData">
                    <template #head-button>
                        <div class="flex items-center cursor-pointer" @click="onOpenPartner">
                            <img class="w-16px h-16px" src="../../../assets/image/Share.png" alt="">
                            <div class="ml-5px text-lightgray text-base">新建合作商</div>
                        </div>
                    </template>
                </filterComponent>
            </div>
        </div>
    </div>
    <div class="bg-white p-20px m-20px rounded-12px">
        <tableComponent :table-header="tableHeader" :table-data="tableData" v-model:page-info="pageInfo"
            @pageChange="handlePageChange" @sort-change="onSortChange">
            <template #logo>
                <el-table-column prop="logo" label="logo">
                    <template #default="scope">
                        <div v-if="scope.row.logo">
                            <el-image :src="scope.row.logo" class="w-40px h-40px"></el-image>
                        </div>
                        <div v-else>--</div>
                    </template>
                </el-table-column>
            </template>
            <template #operator>
                <el-table-column prop="operator" label="操作">
                    <template #default="scope">
                        <el-button type="primary" link @click="onShowDetail(scope.row)">编辑</el-button>
                        <el-button type="danger" link @click="onDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </template>
        </tableComponent>
    </div>
    <DialogPartner v-model:show="show" :record-data="recordData" @success="onSuccess"></DialogPartner>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

import filterComponent from '@/components/filterComponent/index.vue'
import tableComponent from '@/components/tableComponent/index.vue'
import DialogPartner from './components/DialogPartner.vue'
import { getPartnerList, deletePartner } from '@/api/tools/partner'
import type { PartnerDto } from '@/api/tools/partner/type'
import { getFormDataValue } from '@/utils/utils'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { PageReqDto } from '@/api/type' 

const filterData = ref({
    noEmit: true,
    list: {
        customerName: {
            label: '客户名称',
            prop: 'name',
            value: '',
            placeholder: '请输入',
            type: 'input',
            inputType: 'text'
        },
    }
})

const tableHeader = ref([
    {
        label: '合作商名称',
        prop: 'name',
    },
    {
        label: 'logo',
        prop: 'logo',
    },
    {
        label: 'AppID',
        prop: 'appId',
    },
    {
        label: 'AppSecret',
        prop: 'appSecret',
    },
    {
        label: '操作人',
        prop: 'operateName',
    },
    {
        label: '操作',
        prop: 'operator',
    }
])
const tableData = ref<PartnerDto[]>([] as PartnerDto[])

const pageInfo = ref({
    pageSize: 10,
    pageNum: 1,
    total: 0
})

const sort = ref({
    prop: '',
    order: ''
})

const show = ref(false)
const recordData = ref()

/**
 * @description 获取列表
 *
 * @returns 无返回值
 */
const getData = async () => {
    const query = getFormDataValue(filterData.value)

    const res = await getPartnerList({
        ...query,
        // sortField: sort.value.prop,
        // sortOrder: sort.value.order,
        pageSize: pageInfo.value.pageSize,
        pageNum: pageInfo.value.pageNum,
    })
    console.log(111, res)
    tableData.value = res.list
    pageInfo.value.total = res.totalCount
}

const onSortChange = (sortData: {
    order: string,
    prop: string
}) => {
    const map = {
        ascending: 'ASC',
        descending: 'DESC'
    }
    sort.value.order = map[sortData.order as keyof typeof map]
    sort.value.prop = sortData.order ? sortData.prop : ''
    getData()
}


/**
 * @description 显示详情
 *
 * @param detailId 详情ID
 * @returns 无返回值
 */
const onShowDetail = (detailData: PartnerDto) => {
    recordData.value = detailData
    show.value = true
}

const onDelete = (detailData: PartnerDto) => {
    console.log(detailData)
    ElMessageBox.confirm(
        '确认删除该跳记录吗？',
        '提示',
        {
            type: 'warning',
        }
    )
        .then(async () => {
            handleRemove(detailData.id)
        })
}

const handleRemove = async (id: number) => {
    await deletePartner(id)
    ElMessage.success('删除成功')
    getData()
}

const handlePageChange = (ev: PageReqDto) => {
    pageInfo.value.pageNum = ev.pageNum
    pageInfo.value.pageSize = ev.pageSize
    getData()
}

const onOpenPartner = () => {
    recordData.value = null
    show.value = true
}

const onSuccess = () => {
    pageInfo.value.pageNum = 1
    getData()
}

onMounted(() => {
    getData()
})

</script>
<style lang="scss" scoped></style>
